{% extends "base.html" %}
            {% block control %}<li class="treeview active">{% endblock %}
          {% block domain %}
                <li class="active"><a href="/domain/"><i class="fa fa-genderless"></i>域名配置管理</a></li>
             {% endblock %}
      <!-- Content Wrapper. Contains page content -->
             {% block content %}

          <ol class="breadcrumb">
            <li><i class="fa fa-television"></i> 管理中心</li>
            <li class="active">域名列表</li>
          </ol>
        </section>

        <!-- Main content -->
        <section class="content">

          <div class="row">
            <div class="col-xs-12">


              <div class="box">
                <div class="box-header">
                  <h3 class="box-title">域名列表</h3>
                    <div class="pull-right">
                  <button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                       <i class="fa fa-plus-circle"></i>添加域名
                  </button>
                        </div>
                    <form class="modal fade form-horizontal" id="myModal" tabindex="-1" role="dialog"
                   aria-labelledby="myModalLabel" aria-hidden="true"  method="post">
                    {% csrf_token %}
                   <div class="modal-dialog">
                      <div class="modal-content">
                         <div class="modal-header">
                            <button type="button" class="close"
                               data-dismiss="modal" aria-hidden="true">
                                  &times;
                            </button>
                            <h4 class="modal-title" id="myModalLabel">
                               添加域名
                            </h4>
                         </div>
                         <div class=" box-body">
                             <div class="form-group">
                                 <div class="col-sm-5 control-label">
                             {{ form_info.project_name.label_tag }}</div>
                                 <div class="col-sm-7">
                                     {{ form_info.project_name }}
                                  </div>
                             </div>
                             <div class="form-group">
                                 <div class="col-sm-5 control-label">
                             {{ form_info.domain_name.label_tag }}</div>
                                 <div class="col-sm-7">
                                     {{ form_info.domain_name }}
                                  </div>
                             </div>
                             <div class="form-group">
                                 <div class="col-sm-5 control-label">
                             {{ form_info.source_ip.label_tag }}</div>
                                 <div class="col-sm-7">
                                     {{ form_info.source_ip }}
                                  </div>
                             </div>
                             <div class="form-group">
                                 <div class="col-sm-5 control-label">
                             {{ form_info.source_port.label_tag }}</div>
                                 <div class="col-sm-7">
                                  {{ form_info.source_port }}
                                  </div>
                             </div>
                              <div class="form-group">
                                 <div class="col-sm-5 control-label">
                             {{  form_info.dnspod.label_tag }}</div>
                                 <div class="col-sm-7">
                                  {{ form_info.dnspod }} 是否可以通过dnspod操作,是的话存域名ID，不能的话NULL
                                  </div>
                             </div>

                             <div class="form-group">
                                 <div class="col-sm-5 control-label">
                             {{ form_info.model.label_tag}}</div>
                                 <div class="col-sm-7">
                                     {{ form_info.model}}
                                  </div>
                             </div>

                              <div class="form-group">
                                 <div class="col-sm-5 control-label">
                             {{  form_info.source_type.label_tag }}</div>
                                 <div class="col-sm-7">
                                     {{ form_info.source_type}}
                                  </div>
                             </div>

                              <div class="form-group">
                                 <div class="col-sm-5 control-label">
                             {{  form_info.source_line.label_tag }}</div>
                                 <div class="col-sm-7">
                                     {{ form_info.source_line}}
                                  </div>
                             </div>
                         </div>
                         <div class="modal-footer">
                            <button type="button" class="btn btn-default"
                               data-dismiss="modal">关闭
                            </button>
                            <button type="submit" class="btn btn-primary">
                               添加
                            </button>
                         </div>
                      </div><!-- /.modal-content -->
                </div><!-- /.modal -->
                </form>

                </div><!-- /.box-header -->
                <div class="box-body">
                  <table id="example1" class="table table-bordered table-striped">
                    <thead>
                      <tr>
                        <th>名称</th>
                        <th>域名</th>
                        <th>CNAME</th>
                        <th>CNAME状态</th>
                        <th>当月总流量</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody>
                    {% for domain in domain_list %}
                      <tr>
                        <td>{{ domain.project_name }}</td>
                        <td>{{ domain.domain_name }}</td>
                        <td>{{ domain.cname_domain }}</td>
                        <td>{{ domain.Mem_used }}</td>
                        <td>怎么获取呢</td>
                        <td style="width:100px" >
                           <a href="/domain/modify/{{ domain.id }}"><button type="button" class="btn btn-primary btn-xs"><i class="fa fa-calendar-o"></i>设置</button></a>
                           <button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#myModaldel"><i class="fa fa-plus-circle"></i>删除</button>
                           <div class="modal fade" id="myModaldel" tabindex="-1" role="dialog"
                               aria-labelledby="myModalLabel" aria-hidden="true">
                               <div class="modal-dialog">
                                  <div class="modal-content">
                                     <div class="modal-header">
                                        <button type="button" class="close"
                                           data-dismiss="modal" aria-hidden="true">
                                              &times;
                                        </button>
                                        <h4 class="modal-title" id="myModalLabel">
                                           删除
                                        </h4>
                                     </div>
                                     <div class="modal-body">
                                        确认删除{{ domain.domain_name }}?
                                     </div>
                                     <div class="modal-footer">
                                        <button type="button" class="btn btn-default"
                                           data-dismiss="modal">取消
                                        </button>
                                        <a href="/domain/del/{{ domain.id }}"><button type="button" class="btn btn-warning"><i class="fa fa-calendar-o"></i>删除</button></a>
                                     </div>
                                  </div><!-- /.modal-content -->
                            </div><!-- /.modal -->
                            </div>
                        </td>
                      </tr>
                    {% endfor %}
                    </tbody>
                    <tfoot>
                  </table>
                </div><!-- /.box-body -->
              </div><!-- /.box -->
            </div><!-- /.col -->
          </div><!-- /.row -->
        </section><!-- /.content -->
    {% endblock %}

  {% block js %}
    {% load staticfiles %}
        <!-- DataTables -->
    <script src="{% static "plugins/datatables/jquery.dataTables.min.js" %}"></script>
    <script src="{% static "plugins/datatables/dataTables.bootstrap.min.js" %}"></script>

    <!-- Optionally, you can add Slimscroll and FastClick plugins.
         Both of these plugins are recommended to enhance the
         user experience. Slimscroll is required when using the
         fixed layout. -->
      <script>
      $(function () {
        $("#example1").DataTable();
      });
    </script>
  {% endblock %}
